<template>
	<div class="systemBackupAndRestorePage">
		<div class="pageUpgrade">
			<div class="pageUpgradeHeader">
				<span>系统备份和还原</span>
			</div>
			<div class="pageUpgradeBody">
				<wj-Button type="primary" @click="fileBackup"> <i class="el-icon-download"></i> 备份 </wj-Button>
			</div>
			<div class="pageUpgradeBody">
				<el-upload
					class="upload-demo"
					:action="actionStr"
					multiple
					accept=".zip"
					:show-file-list="false"
					:on-change="fileChange"
					:on-progress="fileProgress"
				>
					<wj-Button type="primary"> <i class="el-icon-upload2"></i> 还原 </wj-Button>
				</el-upload>
				<div class="fileNameStyle" v-if="loadLoading">{{ "文件名称：" + fileText }}</div>
				<div class="fileNameStyle" v-if="loadLoading">{{ "上传进度：" + loadProgress + "%" }}</div>
			</div>
		</div>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import { system_backup, system_restore } from "@/utils/request/api";
export default {
	name: "SystemBackupAndRestore",
	data() {
		return {
			// 文件上传  文件名
			fileText: "",
			// 文件上传  组件需要用的action
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/importSql"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/importSql"
					: "",
			loadProgress: 0, // 上传进度百分比
			loadLoading: false, // 信息的显隐
		};
	},
	created() {},
	mounted() {},
	methods: {
		// 文件上传  进度条
		fileProgress(event, file, fileList) {
			console.log(event);
			console.log(file);
			console.log(fileList);
			this.loadProgress = parseInt(event.percent);
			this.loadLoading = this.loadProgress > 0 && this.loadProgress < 100 ? true : false;
		},
		// 文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			// if (file.status !== 'ready') return;
			this.fileText = file.name;
			if (file.status == "success" && file.percentage == 100) {
				this.$showLoading.show("正在还原数据，请稍后...", true, 60000);
				system_restore({
					file: file.raw,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$showLoading.hide(false);
						this.$msg.success("数据还原成功！");
					} else {
						this.$showLoading.hide(false);
						this.$msg.error("数据还原失败！");
					}
				});
			}
		},
		// 数据备份
		fileBackup() {
			this.$showLoading.show("正在备份数据，请稍后...", true, 60000);
			system_backup({}).then((res) => {
				console.log(res);
				if (res != undefined && res != null) {
					this.$showLoading.hide(false);
					this.$msg.success("数据备份成功！");
					this.actualDownload(res);
				} else {
					this.$showLoading.hide(false);
					this.$msg.error("数据备份失败！");
				}
			});
		},
		// 实际下载
		actualDownload(res) {
			let content = res.data;
			let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
			let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
			if ("download" in document.createElement("a")) {
				// 非IE下载
				let elink = document.createElement("a");
				elink.download = fileName;
				elink.style.display = "none";
				elink.href = URL.createObjectURL(blob);
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			} else {
				// IE10+下载
				navigator.msSaveBlob(blob, fileName);
			}
		},
	},
};
</script>
<style lang="less" scoped>
.systemBackupAndRestorePage {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	.pageUpgrade {
		width: 100%;
		height: 216px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.pageUpgradeHeader {
			width: 100%;
			height: 42px;
			margin-bottom: 18px;
			span {
				display: inline-block;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				padding: 0 12px;
				border: 1px solid #d9d9d9;
			}
		}
		.pageUpgradeBody {
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;
			height: 56px;
			background: #f2f2f2;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.fileNameStyle {
				font-size: 14px;
				margin: 0 12px;
			}
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
			}
		}
	}
}
</style>
